<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>焕能博士</title>
    <link rel="stylesheet" href="http://storage.56iq.net/group1/M00/4F/79/CgoKQ1vA1AKAFrJVAAGsktXFgVw914.css"/>
    <link rel="stylesheet" id="pageloader-css"  href="http://storage.56iq.net/group1/M00/4F/21/CgoKQ1u8eiiAN-0QAAANcd4DM4I644.css" type="text/css" media="all" />
    <link rel="stylesheet" type="text/css" href="H5FullscreenPage.css">
    <link rel="stylesheet" type="text/css" href="page-animation.css">
<style>
    .className{
        -webkit-animation: twinkling 1s infinite ease-in-out
    }
    .animated{
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both
    }
    img {
        pointer-event:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;
    }
    @-webkit-keyframes twinkling{
        0%{
            opacity: 0.5;
        }
        100%{
            opacity: 1;
        }
    }
    @keyframes twinkling{
        0%{
            opacity: 0.5;
        }
        100%{
            opacity: 1;
        }
    }

    html, body {
        margin: 0;
        width: 100%;
        height: 100%;
        font-family: arial;
        text-align: center;
    }

    * {
        margin:0;
        padding: 0;
    }
    ul {
        list-style: none;
    }

    .item2 {
        background-color: #0067A6;
    }
    .item1 {
        background-color: #00ABD8;
    }
    .item3 {
        background-color: #008972;
    }
    .item4 {
        background-color: #F5C564;
    }
    .item5 {
        background-color: #F2572D;
    }
    .item6 {
        background-color: #0067A6;
    }

    .item1 .part1 {
        position: absolute;
        top: 100px;
        left: 19%;
        text-align: center;
        width: 100px;
        height: 100px;
        background-color: rgb(116, 178, 9);
    }
    .item1 .part2 {
        position: absolute;
        bottom: 100px;
        right: 19%;
        text-align: center;
        width: 100px;
        height: 100px;
        background-color: rgb(116, 178, 9);
    }
    .item3 .part1 {
        position: absolute;
        top: 100px;
        left: 19%;
        text-align: center;
        width: 100px;
        height: 100px;
        background-color: rgb(116, 178, 9);
    }
    .item3 .part2 {
        position: absolute;
        bottom: 100px;
        right: 19%;
        text-align: center;
        width: 100px;
        height: 100px;
        background-color: rgb(116, 178, 9);
    }
    .item2 .part1 {
        position: absolute;
        top: 100px;
        right: 19%;
        text-align: center;
        width: 100px;
        height: 100px;
        background-color: rgb(116, 178, 9);
    }
    .item2 .part3 {
        position: absolute;
        bottom: 60px;
        left: 19%;
        text-align: center;
        width: 150px;
        height: 150px;
        background-color: rgb(116, 178, 9);
    }
    .item2 .part2 {
        position: absolute;
        top: 100px;
        left: 19%;
        text-align: center;
        width: 100px;
        height: 100px;
        background-color: rgb(116, 178, 9);
    }
    .item4 .part1 {
        position: absolute;
        top: 100px;
        left: 19%;
        text-align: center;
        width: 100px;
        height: 100px;
        background-color: rgb(116, 178, 9);
    }
    .item4 .part2 {
        position: absolute;
        bottom: 100px;
        right: 19%;
        text-align: center;
        width: 150px;
        height: 150px;
        background-color: rgb(116, 178, 9);
    }
    .item5 .part1 {
        position: absolute;
        bottom: 100px;
        right: 19%;
        text-align: center;
        width: 150px;
        height: 100px;
        background-color: rgb(116, 178, 9);
    }
    .item5 .part2 {
        position: absolute;
        top: 100px;
        left: 19%;
        text-align: center;
        width: 150px;
        height: 100px;
        background-color: rgb(116, 178, 9);
    }

    .item6 .part2 {
        position: absolute;
        top: 100px;
        left: 19%;
        text-align: center;
        width: 150px;
        height: 100px;
        background-color: rgb(116, 178, 9);
    }
    .item6 .part1 {
        position: absolute;
        bottom: 100px;
        left: 19%;
        text-align: center;
        width: 250px;
        height: 250px;
        background-color: rgb(116, 178, 9);
    }
    .pic{
        width: 30px ;
        height: 30px;
        z-index: 999;
        float: right;
        right: 4%;
        top:2% ;
        position: absolute;
    }
    .picc{
        -webkit-animation:rotateImg 2s linear infinite;
        vertical-align: middle;

    }
    @keyframes rotateImg {
        0% {transform : rotate(0deg);}
    100% {transform : rotate(360deg);}
    }

    @-webkit-keyframes rotateImg {
        0%{-webkit-transform : rotate(0deg);}
        100%{-webkit-transform : rotate(360deg);}
    }
</style>

</head>
<body class="H5FullscreenPage" style="background-color: #f2f2f2;overflow: hidden; pointer-event:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;" onmousewheel="return false;">
<div id="bonfire-pageloader" >
    <div class="bonfire-pageloader-icon" style="margin-left: 35%;margin-top: 78%">
        <div>加载中...</div>
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
			 width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
		<path id="loading-12-icon" d="M291,82.219c0,16.568-13.432,30-30,30s-30-13.432-30-30s13.432-30,30-30S291,65.65,291,82.219z
			 M261,404.781c-15.188,0-27.5,12.312-27.5,27.5s12.312,27.5,27.5,27.5s27.5-12.312,27.5-27.5S276.188,404.781,261,404.781z
			 M361.504,113.167c-4.142,7.173-13.314,9.631-20.487,5.489c-7.173-4.141-9.631-13.313-5.49-20.487
			c4.142-7.173,13.314-9.631,20.488-5.489C363.188,96.821,365.645,105.994,361.504,113.167z M188.484,382.851
			c-14.348-8.284-32.697-3.368-40.98,10.98c-8.285,14.349-3.367,32.696,10.98,40.981c14.35,8.283,32.697,3.367,40.98-10.981
			C207.75,409.482,202.834,391.135,188.484,382.851z M421.33,184.888c-8.368,4.831-19.07,1.965-23.901-6.404
			c-4.832-8.368-1.965-19.07,6.404-23.902c8.368-4.831,19.069-1.964,23.9,6.405C432.566,169.354,429.699,180.056,421.33,184.888z
			 M135.399,329.767c-8.285-14.35-26.633-19.266-40.982-10.982c-14.348,8.285-19.264,26.633-10.979,40.982
			c8.284,14.348,26.632,19.264,40.981,10.98C138.767,362.462,143.683,344.114,135.399,329.767z M436.031,277.249
			c-11.044,0-20-8.953-20-19.999c0-11.045,8.955-20.001,20.001-20.001c11.044,0,19.999,8.955,19.999,20.002
			C456.031,268.295,447.078,277.249,436.031,277.249z M115.97,257.251c-0.001-16.57-13.433-30.001-30.001-30.002
			c-16.568,0.001-29.999,13.432-30,30.002c0.001,16.566,13.433,29.998,30.001,30C102.538,287.249,115.969,273.817,115.97,257.251z
			 M401.333,364.248c-10.759-6.212-14.446-19.97-8.234-30.73c6.212-10.759,19.971-14.446,30.731-8.233
			c10.759,6.211,14.445,19.971,8.232,30.73C425.852,366.774,412.094,370.46,401.333,364.248z M135.398,184.736
			c8.285-14.352,3.368-32.698-10.98-40.983c-14.349-8.283-32.695-3.367-40.981,10.982c-8.282,14.348-3.366,32.696,10.981,40.981
			C108.768,204,127.115,199.082,135.398,184.736z M326.869,421.328c-6.902-11.953-2.807-27.242,9.148-34.145
			s27.243-2.806,34.146,9.149c6.902,11.954,2.806,27.243-9.15,34.145C349.059,437.381,333.771,433.284,326.869,421.328z
			 M188.482,131.649c14.352-8.286,19.266-26.633,10.982-40.982c-8.285-14.348-26.631-19.264-40.982-10.98
			c-14.346,8.285-19.264,26.633-10.98,40.982C155.787,135.017,174.137,139.932,188.482,131.649z"/>
		</svg>

    </div>
</div>
<img   id='play' src="img/oo.png" class="pic pic"   onclick="uu()">
<div  id="begin"    style="
   z-index: 100;
    background-size: 123%;
    width: 38%;
    height: 22%;
    position: absolute;
    left: 26%;
    bottom: 6%;
    display: none;
    /* background-color: wheat; */
    font-size: 16px;
    border-radius: 50%;
    background-image: url(img/WechatIMG948.png);
"></div>
<div  onclick="lp()" id="p2" style="width: 100%;height: 100%;display: block; position: absolute;text-align: center;display: none">
                        <div style="color: white;position: absolute;top: 2%;text-align: center;width: 100%">点击右边图标打开音乐</div>
                        <img  class="iimg" id="load2" src="http://storage.56iq.net/group1/M00/4F/B5/CgoKQ1vEBCmAGo8oAAq5cuKrNFI595.png" style="height: 100%;text-align: center; background-size:100% 100%;"/>
                        <!--
                        <img src="img/logo.png" style="position: absolute;
                        bottom: 57%;
                        width: 62%;
                        right: 49%;
                    "/>
                        <img src="img/ziti.png" style=" position: absolute;
                        bottom: 51%;
                        width: 74%;
                        right: 12%;
                    "/> -->
                        <img  class="ballon" src="http://storage.56iq.net/group1/M00/4F/B5/CgoKQ1vEBF-APOPPAAFtJo2oa-8845.png" style="position: absolute;
                        bottom: 0%;
                        width: 100%;
                        right: -1%;
                    "/>
                        <img  class="shake-slow shaker" src="http://storage.56iq.net/group1/M00/4F/6B/CgoKQ1vAEUGAYsHJAAAvlOx9y7A618.png" style="
                     position: absolute;
                        bottom: 66%;
                        width: 75%;
                        height: 27%;
                        right: 11%;
                    "/>
                        <img  class="className" src="img/WechatIMG654.png" style="
                     width: 24%;
                        height: 13%;
                        position: absolute;
                        bottom: 50%;
                        right: -1%;"/>
                        <img  class="shake-slow shaker"  src="http://storage.56iq.net/group1/M00/4F/6E/CgoKQ1vANHCAUVP5AAAI8uTwUew394.png" style="
                    position: absolute;
                        bottom: 21%;
                        width: 23%;
                        right: 5%;"/>
                        <img  class="shake-fast shaker"  src="http://storage.56iq.net/group1/M00/4F/6E/CgoKQ1vANLSAWfYOAAAI1mHU61U418.png" style="
                    position: absolute;
                        bottom: 20%;
                        /* margin-left: -7%; */
                        left: 1%;
                        width: 23%;"/>


</div>
<div id="p3" style="display: none">
    <img   class="iimg"  id="load1"  src="img/画面1缩小版3.gif" width="100%">
</div>
<div id="p4" style="display: none">
    <img src="http://storage.56iq.net/group1/M00/4F/33/CgoKQ1u9az6ACiOzAMA_CjAppiU496.gif" width="100%">
</div>

<div  id="p8" style="width:100%;height:100%;display: none;position: absolute; " onload="lp()">

    <div class="H5FullscreenPage-wrap" onload="lp()">


        <div class="item item5" onload="lp()">
            <div style="color: white;position: absolute;top: 2%;text-align: center;width: 100%">触屏打开音乐</div>
            <img  class="iimg" id="load9" src="http://storage.56iq.net/group1/M00/4F/B5/CgoKQ1vEBCmAGo8oAAq5cuKrNFI595.png" style="height: 100%;text-align: center; background-size:100% 100%;"/>
            <!--
            <img src="img/logo.png" style="position: absolute;
            bottom: 57%;
            width: 62%;
            right: 49%;
        "/>
            <img src="img/ziti.png" style=" position: absolute;
            bottom: 51%;
            width: 74%;
            right: 12%;
        "/> -->
            <img  class="ballon" src="http://storage.56iq.net/group1/M00/4F/B5/CgoKQ1vEBF-APOPPAAFtJo2oa-8845.png" style="position: absolute;
                        bottom: 0%;
                        width: 100%;
                        right: -1%;
                    "/>
            <img  class="shake-slow shaker" src="http://storage.56iq.net/group1/M00/4F/6B/CgoKQ1vAEUGAYsHJAAAvlOx9y7A618.png" style="
                     position: absolute;
                        bottom: 66%;
                        width: 75%;
                        height: 27%;
                        right: 11%;
                    "/>
            <img  class="className" src="img/WechatIMG654.png" style="
                     width: 24%;
                        height: 13%;
                        position: absolute;
                        bottom: 50%;
                        right: -1%;"/>
            <img  class="shake-slow shaker"  src="http://storage.56iq.net/group1/M00/4F/6E/CgoKQ1vANHCAUVP5AAAI8uTwUew394.png" style="
                    position: absolute;
                        bottom: 21%;
                        width: 23%;
                        right: 5%;"/>
            <img  class="shake-fast shaker"  src="http://storage.56iq.net/group1/M00/4F/6E/CgoKQ1vANLSAWfYOAAAI1mHU61U418.png" style="
                    position: absolute;
                        bottom: 20%;
                        /* margin-left: -7%; */
                        left: 1%;
                        width: 23%;"/>

        </div>
        <div class="item item6">
            <img   class="iimg"  id="load8"  src="img/画面1缩小版3.gif" width="100%">

        </div>
        <div class="item item7">
            <img src="http://storage.56iq.net/group1/M00/4F/33/CgoKQ1u9az6ACiOzAMA_CjAppiU496.gif" width="100%">

        </div>


        <div class="item item1">
            <div style="width: 114%;
                        height: 106%;
                        display: block;
                        position: absolute;
                        margin-left: -8%;
                        background-size: 100% 100%;
                        background-image: url(http://storage.56iq.net/group1/M00/4F/77/CgoKQ1vAss6AP9NGAAPwyV5ryBQ837.png);
                        margin-top: -7%;">
                <img  class="ballon" src="http://storage.56iq.net/group1/M00/4F/77/CgoKQ1vAtBmARbgCAAAgeWyghfQ490.png" style="
                    position: absolute;
                        bottom: 61%;
                        width: 49%;
                        left: 20%;">
                <img  class="ballon" src="http://storage.56iq.net/group1/M00/4F/77/CgoKQ1vAtT-AMkw3AAAINt7pLu8307.png"  style="position: absolute;
                            bottom: 43%;
                            width: 26%;
                            left: 14%;"/>

                <img  src="img/bling.png" style="    position: absolute;
                                bottom: 70%;
                                width: 16%;
                                right: 5%;" class="ballon"/>

            </div>

        </div>

        <div class="item item2">
           <img src="img/pp.jpeg" style="height: 100%;width: 100%"/>
        </div>
        <div class="item item3">
            <img src="img/WechatIMG944.jpeg" style="height: 100%;width: 100%"/>
        </div>
        <div class="item item4">
            <img src="img/WechatIMG414.jpeg" style="height: 100%;width: 100%"/>
            <button  onclick="dump()" style="position: absolute; background-color: aquamarine;  width: 78%;
                height: 6%;
                bottom: 4%;
                left: 12%;
                opacity: 0.1;"></button>
        </div>


    </div>
</div>
<audio class="audio" src="http://img02.tuke88.com/preview_music/00/00/05/seemp3-5ba0b0f6144741110.mp3" id="myaudio"   controls  loop="true" hidden="true"></audio>
<audio src="http://pic.ibaotu.com/mp3Watermark_v3/00/81/14/5a16de602143c16a87ee7dc91ae429ca.mp3" id="dong"  controls   hidden="true"> </audio>
<audio src="http://img.tukuppt.com/origin_music/00/07/60/pd-5b7a1e7c1c10c847.mp3" id="power"  controls   hidden="true"></audio>
 </body>
<script src="http://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
<script type="text/javascript" src="H5FullscreenPage.js"></script>
<script>



        var timeOutEvent = 0;
        var t;
        var c = 0;
        var t2 = 0;
        var t3 = 0;
        var t4 = 0;
        var tty = 0;
        var zong;
        // 总定时器
        var all = 0;
        var allt = 0;
//    function audioAutoPlay(id){
//
//        var audio = document.getElementById(id),
//            play = function(){
//                audio.play();
//                document.removeEventListener("touchstart",play, false);
//            };
//        audio.play();
//        document.addEventListener("WeixinJSBridgeReady", function () {
//            play();
//        }, false);
//        document.addEventListener('YixinJSBridgeReady', function() {
//            play();
//        }, false);
//        document.addEventListener("touchstart",play, false);
//    }
        $("body").css("height", $(window).height + "px");

        $(document.body).css({
            "overflow-x": "hidden",
            "overflow-y": "hidden"
        });

        function longPress() {


            $('#p1').css('display', 'none');
            $('#p2').css('display', 'none');
            $('#p3').css('display', 'block');
            $('#power')[0].pause();
            $('#dong')[0].play();


            var t2 = window.setTimeout(function () {
                $('#dong')[0].play();
                $('#p3').css('display', 'none');
                $('#p4').css('display', 'block');
                t3 = window.setTimeout(function () {
                    $('#p2').css('display', 'none');
                    $('#p3').css('display', 'none');
                    $('#p4').css('display', 'none');
                    $('#p8').css('display', 'block');
                    $('#begin').css('display', 'none');
                    $('#myaudio')[0].play();
                    $('#dong')[0].pause();

                }, 18000);
            }, 3000)
        }

        var start = window.setTimeout(function () {


//            audioAutoPlay('myaudio');


            $('#p8').css('display', 'block');
            $('#bonfire-pageloader').css('display', 'none');
//        //阻止浏览器下拉事件
            $('body').on('touchmove', function (event) {
                event.preventDefault();
            });
            // or
            // document.addEventListener('touchmove', function(e){e.preventDefault()}, false);
            setInterval(function () {
                $('#myaudio')[0].currentTime = 0
            }, 25000);

        }, 3000);

        var mo = function (e) {
            e.preventDefault();
        };

        function stop() {
            document.body.style.overflow = 'hidden';
            document.addEventListener("touchmove", mo, false);//禁止页面滑动
        }

        stop();
        $('#myaudio')[0].pause();

        $("#begin").on({
            touchstart: function (e) {
                dont();
                $("#begin").css("background-image", "url(img/发光.png)");
                $('#myaudio')[0].pause();
                dongo();

                tty = window.setTimeout(function () {
                    $('#power')[0].pause();

                    longPress();
                    timedCount();
                }, 2000);
//            timeOutEvent = setTimeout("longPress()",500);
//            e.preventDefault();
            },
            touchend: function () {
                $('#myaudio')[0].currentTime = 0
                $('#dong')[0].currentTime = 0;
                window.clearInterval(t);
                window.clearInterval(t2);
                window.clearInterval(t3);
                window.clearInterval(t4);
                window.clearInterval(tty);
                $('#myaudio')[0].play();
                $('#dong')[0].pause();
                if (c <= 20) {
                    $('#dong')[0].pause();
//                    $('#dong')[0].pause();

                    $("#begin").css("background-image", "url(img/WechatIMG948.png)");
                    c = 0;
                    $('#p2').css('display', 'block');
                    $('#p3').css('display', 'none');
                    $('#p4').css('display', 'none');

                    $('#p5').css('display', 'none');
                    $('#p8').css('display', 'none');
                }
                if (c > 20) {
                    $('#dong')[0].pause();
                    c = 0;
//                    $('#dong')[0].pause();
                    $('#begin').css('display', 'none');
                    $('#p8').css('display', 'block');
                    $('#p3').css('display', 'none');
                    $('#p4').css('display', 'none');
                    $('#p2').css('display', 'none');
                    $('#p5').css('display', 'none');
                }

                return false
            }

        });

        function timedCount() {
            c = c + 1;
            t = window.setTimeout("timedCount()", 1000);
        }

        window.ontouchstart = function (e) {
            if (e.target.tagName === 'img')
                e.preventDefault();
        };

        function dump() {
            window.location.href = "https://shop.m.jd.com/?shopId=60947"; //你需要跳转的地址
        }

        H5FullscreenPage.init({
            'type': 2, 'pageShow': function (dom) {

            }, 'pageHide': function (dom) {
                //console.log(dom);
            }
        });

        function lp() {
            $('#myaudio')[0].play();

        }

        function dont() {
            $('#myaudio')[0].pause();

        }

        function dongo() {
            $('#dong')[0].play();

        }


        $(document).ready(function(){

            audioAutoPlay();
        });
        function audioAutoPlay() {
            var audio = document.getElementById('myaudio');
            audio.play();
            document.addEventListener("WeixinJSBridgeReady", function () {
                audio.play();
            }, false);
        }




        function uu() {
            // 播放暂停音乐
            if($("#play").hasClass("picc")){
                $("#play").removeClass("picc");
                $('#myaudio')[0].pause()

            }
            else {
                $("#play").addClass("picc");
                $('#myaudio')[0].play()
            }
        }

</script>
</html>